<template>
  <div id="container" class="ma-5" ref="content">
    <v-card-text v-for="(item, index) in info.message_list" :key="index" style="overflow: hidden">
      <p class="messageTime">
        <v-chip>{{ item.send_time | time }}</v-chip>
      </p>
      <div class="myMessage" v-if="item.sender.id === id" style="display: flex">
        <!-- <img class="avatar" width="30" height="30" :src="item.self ? user.img : session.user.img" /> -->

        <span class="myMessageText">
          {{ item.content }}
        </span>
        <span style="float: right" class="ml-5 mr-3">
          <v-avatar size="45" color="white" class="avatar-center">
            <v-img :src="item.sender.profile.avatar"></v-img>
          </v-avatar>
        </span>
      </div>
      <div class="otherMessage" v-else style="display: flex">
        <!-- <img class="avatar" width="30" height="30" :src="item.self ? user.img : session.user.img" /> -->
        <span class="ml-3 mr-5">
          <v-avatar size="45" color="white" class="avatar-center">
            <v-img :src="item.sender.profile.avatar"></v-img>
          </v-avatar>
        </span>
        <span class="otherMessageText">
          {{ item.content }}
        </span>
      </div>
    </v-card-text>
  </div>
</template>

<script>
import axios from "axios";
export default {
  props: ["messageInfo"],
  data() {
    return {
      id: "",
      timer: "",
      info: "",
    };
  },
  methods: {
    scroll() {
      this.$refs.content.scrollTop = this.$refs.content.scrollHeight;
    },
    getChat(index) {
      const that = this;
      axios
        .get("https://api.dreamhub.moyunbook.xyz/message/user/" + that.messageInfo.info.id + "/", {
          headers: {
            Authorization: "Bearer " + localStorage.getItem("access"),
          },
        })
        .then(function (response) {
          const data = response.data;
          // console.log(data);
          that.info = data;
          if (index === 1) {
            that.$nextTick(() => {
              setTimeout(that.scroll, 500)
              // that.scroll();
            });
          }
          //   that.$refs.content.$vuetify.goTo(300, { container:Vue });
        });
    },
  },
  mounted() {
    this.id = JSON.parse(localStorage.getItem("userinfo")).id;
    this.timer = setInterval(this.getChat, 1000);
    this.getChat(1);
    // this.$nextTick(() => {
    //    this.scroll();
    //  })
    // this.info = this.messageInfo
    // console.log(this.info.info.id)
    // this.scroll();
  },
  filters: {
    // 将日期过滤为 hour:minutes
    time(date) {
      if (typeof date === "string") {
        date = new Date(date);
      }
      let minute = date.getMinutes();
      if (minute / 10 < 1) {
        //补零
        minute = "0" + minute;
      }
      return date.getMonth() + 1 + "月" + date.getDate() + "日  " + date.getHours() + ":" + minute;
    },
  },
  computed: {
    refresh() {
      return this.$store.state.refresh;
    },
  },
  watch: {
    refresh() {
      this.getChat(1);
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style>
#container {
  height: 350px;
  overflow: scroll;
  overflow-x: hidden;
}
.messageTime {
  margin: 7px 0;
  text-align: center;
}
.myMessage {
  float: right;
}
.myMessageText {
  float: right;
  display: flex;
  align-items: center;
  background-color: #9155fd;
  color: white;
  padding: 10px;
  font-size: 16px;
  border-radius: 8px;
  word-break: break-all;
  max-width: 40vw;
}

.otherMessageText {
  float: right;
  display: flex;
  align-items: center;
  background-color: rgba(94, 86, 105, 0.06);
  color: black;
  padding: 10px;
  font-size: 16px;
  border-radius: 8px;
  word-break: break-all;
  max-width: 40vw;
}
</style>
